import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import { ListView, Grid } from 'antd-mobile';
import { imgInter } from '../../data/Interface';
import pxPage from '../../root/pxPage';
import './dynaic.css'
import { getdynamic } from '../../redux/actionCreator'

const contentdivuser = {
    width: '100%',
    height: pxPage(15),
    fontSize: pxPage(14),
    color: 'rgb(0,204,255)',
    fontWeight: 'bolder',
    paddingTop: pxPage(10)
}

const contentdivcontext = {
    fontSize: pxPage(15),
    width: '100%',
    color: 'white',
    wordWrap: 'break-word',
    paddingTop: pxPage(10),
    paddingBottom: pxPage(10)
}

const rowitem = {
    width: pxPage(300),
    padding: `0px ${pxPage(15)}px 0px ${pxPage(60)}px`,
    color: 'black',
    position: 'relative',
    backgroundColor: '#080904'
}
const itemStyl = {
    backgroundColor: 'black',
    width: pxPage(100),
    height: pxPage(100),
    padding: '0px',
    bolder: '2px solid gray',
    objectFit: 'cover',
}
const contexttime = {
    color: 'gray',
    padding: '10px 0'
}
const contextimg = {
    width: pxPage(45),
    height: pxPage(45),
    position: 'absolute',
    top: pxPage(15),
    left: pxPage(10),
    borderRadius: '5px',
    zIndex: 2,
    objectFit: 'cover'
}
const NUM_ROWS = 20;
let pageIndex = 0;
function genData(pIndex = 0) {
    const dataBlob = {};
    for (let i = 0; i < NUM_ROWS; i++) {
        const ii = (pIndex * NUM_ROWS) + i;
        dataBlob[`${ii}`] = `row - ${ii}`;
    }
    return dataBlob;
}

class MyListView extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            isLoading: true,
            tab: false
        };
        this.props.dispatch(getdynamic())
    }

    componentDidMount() {
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 600);
    }

    // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
    componentWillReceiveProps(nextProps) {
        if (nextProps.dataSource !== this.props.dataSource) {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
            });
        }
    }
    // 到底
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log('reach end', event);
        this.setState({ isLoading: true });
        setTimeout(() => {
            this.rData = { ...this.rData, ...genData(++pageIndex) };
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 1000);
    }

    toTop() {
        window.scrollTo(0, 0)
    }

    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }

    }

    render() {
        const data = this.props.dynamic
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    // backgroundColor: '#33273D',
                    // height: 1,
                    // borderTop: '1px solid #ECECED',
                    borderBottom: '2px solid #33273d',
                    color: 'black'
                }}
            ></div>
        );
        let index = data.length - 1;

        const row = (rowData, sectionID, rowID) => {//每项所渲染的数据
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index--];

            return (
                <div
                    key={rowID} style={{ position: 'relative' }}
                    onClick={() => {
                        this.props.history.push('/dynaicdateil')
                        localStorage.setItem('dynaicdateil', JSON.stringify(obj))
                    }}
                >
                    <img src={imgInter + obj?.user_pic} style={contextimg} ></img>
                    <div style={rowitem}>
                        <div className='content-div-user' style={contentdivuser}>{obj?.user_name}</div>
                        <div className='content-div-context' style={contentdivcontext}>{obj?.dynamic?.dynamic_context}</div>

                        <Grid
                            data={obj?.dynamic_pic}
                            columnNum={3}
                            // 这个按照图片张数放宫格的样式不好看
                            // columnNum={((obj?.dynamic_pic?.length) <3) ? (obj?.dynamic_pic?.length) % 3 : 3}
                            itemStyle={itemStyl}
                            activeStyle={false}
                            hasLine={false}
                            renderItem={dataItem => (
                                <img
                                    style={itemStyl}
                                    src={imgInter + dataItem?.dynamic_pic_url}
                                ></img>
                            )}
                        />
                        <div className='context-time' style={contexttime}>{obj?.dynamic?.dynamic_time}</div>
                    </div>
                </div>
            );
        };
        return data.length !== 0 ? (
            <>
                <ListView
                    initialListSize={3}
                    dataSource={this.state.dataSource}//初始数据
                    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                        {this.state.isLoading ? 'Loading...' : 'Loaded'}
                    </div>)}//是否到底没到底loading...
                    renderRow={row}//每一项
                    renderSeparator={separator}//每个列表下面的灰色部分
                    className="am-list"
                    pageSize={4}//渲染行数
                    useBodyScroll//body容器
                    scrollRenderAheadDistance={500}//什么时候加载下一行
                    onEndReached={this.onEndReached}//到底时的回调函数
                    onEndReachedThreshold={10}//距离底部10像素执行上面的函数
                // quickSearchBarTop//快速返回top
                />
                {/* <button
                    style={{ position: 'fixed', bottom: '10px', right: '10px', backgroundColor: 'green', height: '10px', width: '10px' }}
                    onClick={this.scrollToAnchor.bind(this, 'top')} >点我到顶部</button> */}
            </>
        )
            : <div style={{ backgroundColor: 'black', textAlign: 'center', margin: '30px' }}>没有动态呢，快去发表动态吧！</div>

    }
}
const mapStateToProps = (state) => {
    return {
        shop: state.shop,
        business: state.business,
        login: state.login,
        dynamic: state.dynamic
    }
}

export default withRouter(connect(mapStateToProps)(MyListView))